import React from 'react';
import ReactEcharts from 'echarts-for-react';

const ModuleLoadChartComponent = () => {
    const option = {
        title: { text: 'ECharts 入门示例' },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    };

    let code =
        '<ReactEcharts \n' +
        '    option={this.getOtion()} \n' +
        "    style={{height: '350px', width: '100%'}}  \n" +
        "    modules={['echarts/lib/chart/bar', 'echarts/lib/component/tooltip', 'echarts/lib/component/title']} \n" +
        "    className='react_for_echarts' />";
    return (
        <div className="examples">
            <div className="parent">
                <label>
                    {' '}
                    load echarts module as you wish <strong>reduce the file size</strong>:{' '}
                </label>
                <ReactEcharts
                    option={option}
                    style={{ height: '350px', width: '100%' }}
                    modules={[
                        'echarts/lib/chart/bar',
                        'echarts/lib/component/tooltip',
                        'echarts/lib/component/title',
                    ]}
                    className="react_for_echarts"
                />
                <label> code below: </label>
                <pre>
                    <code>{code}</code>
                </pre>
            </div>
        </div>
    );
};

export default ModuleLoadChartComponent;
